<template>
  <div class="tabs">
    <div :class="{item:true, active:index==activeIndex}" 
          v-for="(item,index) in lists" :key="index"
          @click="tabChange(index)">{{title?item[title]:item}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0,
      }
    },
    props: {
      lists: {
        type: Array,
        default: function(){
          return ['1','2','3']
        }
      },
      title: {
        type: String,
        default:''
      },
      index: {
        type: Number,
        default: 0,
      },
    },
    mounted() {
      if(this.index) {
        this.activeIndex = this.index
      }
    },
    methods: {
      tabChange(index) {
        this.activeIndex = index
        this.$emit('change',index)
      }
    },
  }
</script>

<style scoped>
.tabs {
  background: #f8f8f8;
  width: 100%;
  max-width: 85px;
}
.item {
  font-size: 13px;
  height: 55px;
  width: 100%;
  color: #555;
  text-align: center;
  line-height: 55px;
  /* border-left: 2px solid transparent; */
}
.active {
  background: #fff;
  color: #222;
  font-weight: bold;
  width: calc(100% - 2px);
  border-left: 2px solid #f44;
}
</style>